<template>
	<view class="publish">
		<view class="main_body">
			<view class="character">
				<view class="leftTit">广告标题： </view>
				<input v-model="obj.ggName" style="font-size: 26rpx;margin-top: -1rpx;color: #808080;" type="text" placeholder="请输入广告标题">
			</view>
			<!-- <view class="character">
				<view class="leftTit">投放开始日期： </view>
				<view class="picker-container">
				  <picker mode="date" :value="obj.startTime" @change="onStartDateChange">
					<view class="uni-input">{{ obj.startTime }}</view>
				  </picker>
				</view>
			</view>
			<view class="character">
				<view class="leftTit">投放结束日期：</view>
				<input v-model="obj.endTime" disabled  style="font-size: 26rpx;margin-top: -1rpx;color: #808080;" type="text" placeholder="请选择投放结束日期">
			</view>
			<view class="character">
				<view class="leftTit">投放天数： </view>
				<uni-number-box v-model="obj.day" style="margin-top: -5rpx;color: #808080;" :min="1" :max="31" @change="getFiveDaysAfter(obj.startTime)"/>
			</view> -->
			<!-- 添加小程序开关 -->
			<view class="character">
				<view class="leftTit">添加小程序：</view>
				<checkbox-group>
				  <label class="switch-container" @tap="toggleSwitch">
					<checkbox :value="isChecked" class="switch-input" />
					<view class="switch-bar" :class="{'active': isChecked}"></view>
				  </label>
				</checkbox-group>
			</view>
			<view class="character" v-if="isChecked">
				<view class="leftTit">小程序appId： </view>
				<input v-model="obj.appid" style="font-size: 26rpx;margin-top: -1rpx;color: #808080;" type="text" placeholder="请输入小程序appId">
			</view>
			<view class="textarea" v-if="!isChecked">
				<textarea v-model="obj.content" style="font-size: 26rpx;color: #808080;" placeholder="请输入投放内容介绍"></textarea>
			</view>
			<!-- 图片上传 -->
			<view class="Upload_module">
				<view class="layout">
					<view class="picture_list">
						<!-- 图片 -->
						<view v-for="item,index in obj.chooseImags">
							<view @tap="handlePrevewImage(item)" class="cu-avatar view"
								:style="{'backgroundImage':'url('+item+')' }">
							</view>
							<image class="delete" @tap="bandleRemoveImg(index)" mode="widthFix"
								src="../../static/img/img/del1.png"></image>
						</view>

						<!-- 上传按钮 -->
						<view class="uploadImg" @click="uploadImg" v-if="obj.chooseImags.length<=0">
							<view class="image">
								<image src="../../static/img/img/jiahao.png" mode="widthFix">
								</image>
							</view>
						</view>
					</view>
				</view>
				<view class="zy">注意：图片尺寸建议使用300px*600px</view>
			</view>
		</view>
		<view class="btn_bottom">
			<button class="cu-btn bnt2" @click="releaseBtn">提交广告</button>
		</view>
	</view>
</template>

<script>
	import { getputIn ,userInfo} from '@/api/api.js'
	export default {
		data() {
			return {
				userInfo:{},
				//图片列表
				obj: {
					ggName: "",
					content: "",
					chooseImags: [],
					// day:1,
					// endTime:"",
					// startTime:"请选择投放开始日期",
					appid:"",
					state:0,
					switch:"",
				},
				isChecked: false,
				show: false
			}
		},
		watch: {
			obj: {
				deep: true, //true为进行深度监听,false为不进行深度监听
				handler(newVal) {
					console.log(newVal);
					if (newVal.title && newVal.content && newVal.chooseImags.length) {
						this.show = true;
					} else {
						this.show = false;
					}
				}
			}
		},
		onLoad() {
			this.getUser()
		},
		methods: {
			getUser(){
				let that = this
				uni.getStorage({
				    key: 'data1',
				    success: function (res) {
						userInfo(res.data.phone).then((userRes) => {
							// let that = this
							that.userInfo = userRes.info
						  })
				    }
				});
			},
			// 上传图片
			uploadImg() {
				uni.chooseImage({
					//同时选中的图片的数量
					count: 1,
					//图片的格式  原图  压缩
					sizeType: ['original', 'compressed'],
					//图片的来源  相册  照相机
					sourceType: ['album', 'camera'],
					success: (result) => {
						console.log(result)
						//图片数组进行拼接					
						this.obj.chooseImags = [...this.obj.chooseImags, ...result.tempFilePaths];
					},
				});
			},
			//反馈,图片放大预览
			handlePrevewImage(e) {
				//先构造要预览的图标数组
				const urls = this.obj.chooseImags;
				//接收传递过来的图片url
				const current = e;
				wx.previewImage({
					current, // 当前显示图片的http链接
					urls // 需要预览的图片http链接数组列表
				})
			},

			//删除data里面图片的方法
			bandleRemoveImg(index) {
				console.log(index)
				//2.获取data中的图片数组
				const chooseImagsData = this.obj.chooseImags;
				//3.根据索引删除元素
				chooseImagsData.splice(index, 1);
				//4.重新填充会chooseImags中
				this.obj.chooseImags = chooseImagsData;
				console.log(this.chooseImags)
			},
			
			// 发布
			releaseBtn(){
				// 表单校验
				if(this.obj.switch==1){
					if(!this.obj.ggName){
						uni.showToast({
							title: '请输入广告标题',
							icon: 'none',
						});
					}else if(!this.obj.appid){
						uni.showToast({
							title: '请输入小程序appId',
							icon: 'none',
						});
					}else if(this.obj.chooseImags.length==0){
						uni.showToast({
							title: '上传广告图片',
							icon: 'none',
						});
					}else{
						this.getTj()
					}
				}else if(!this.obj.switch || !this.obj.switch==0){
					if(!this.obj.ggName){
						uni.showToast({
							title: '请输入广告标题',
							icon: 'none',
						});
					}else if(!this.obj.content){
						uni.showToast({
							title: '请输入投放内容介绍',
							icon: 'none',
						});
					}else if(this.obj.chooseImags.length==0){
						uni.showToast({
							title: '上传广告图片',
							icon: 'none',
						});
					}else{
						this.getTj()
					}
				}
			},
			
			
			// 提交
			getTj(){
				let data = {
					tfrName:this.userInfo.userName,
					tfrId:this.userInfo.id,
					tfrPhone:this.userInfo.phone,
					ggName:this.obj.ggName,
					image:this.obj.chooseImags[0],
					content:this.obj.content,
					switch:this.obj.switch,
					isZf:0
				}
				getputIn(data).then((res) => {
					if(res.code==200){
						uni.showToast({
								title: res.message,
								icon: 'success',
							});
						setTimeout(() => {
								uni.navigateTo({
									url: '../user/putIn',
								});
							  }, 3000);
					}else{
						uni.showToast({
								title: '提交失败！',
								icon: 'error',
							});
					}
				  })
			},
			
			// 显示小程序id
			toggleSwitch() {
			      this.isChecked = !this.isChecked;
				  if(this.isChecked){
					  this.obj.switch = 1
				  }else{
					  this.obj.switch = 0
				  }
				  console.log('this.isChecked',this.isChecked)
			    }
		}
	}
</script>

<style lang="scss" scoped>
	.cu-avatar {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background-color: #ccc;
		color: #ffffff;
		white-space: nowrap;
		position: relative;
		width: 64upx;
		height: 64upx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
	}

	// 
	.publish {
		width: 100%;
		height: 100%;

		.main_body {
			margin-top: 24rpx;
			padding: 24rpx;
			border-top-left-radius: 24rpx;
			border-top-right-radius: 24rpx;
			background-color: #ffffff;

			.character {
				border-bottom: 2rpx solid #e8e8e8;
				padding: 22rpx 0;
				display: flex;
			}

			.textarea {
				padding: 22rpx 0;
				border-bottom: 2rpx solid #e8e8e8;

				textarea {
					width: 100%;
					font-size: 28rpx;
				}
			}
		}

		.frequency {
			position: relative;
			width: 260rpx;
			height: 390rpx;

			.video {
				width: 260rpx !important;
				height: 390rpx !important;
				border-radius: 16rpx;

				.suspend {
					position: absolute;
					left: 106rpx;
					top: 162rpx;
					z-index: 100;
					width: 54rpx;
					height: 54rpx;
					border-radius: 100rpx;
				}

				.covers {
					position: absolute;
					width: 100%;
					bottom: 24rpx;
					z-index: 100;

					text {
						display: inline-block;
						width: 200rpx;
						height: 60rpx;
						line-height: 60rpx;
						font-size: 30rpx;
						color: #4D5EFF;
						background-color: #fff;
						border-radius: 8rpx;
					}
				}
			}

			.modal_box {
				position: absolute;
				background-color: rgba(0, 0, 0, 0.2);
				width: 260rpx;
				height: 390rpx;
				left: 0;
				top: 0;
				border-radius: 16rpx;
			}
		}


		.picture_list {
			display: flex;
			flex-wrap: wrap;

			.delete {
				position: absolute;
				right: 5px;
				z-index: 10;
				top: 5px;
				width: 16px;
				height: 16px;
				border-radius: 2px;
			}

			view {
				width: 154rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				height: 154rpx;
				position: relative;

				.cover {
					position: absolute;
					height: 44rpx;
					line-height: 44rpx;
					background: rgba(0, 0, 0, 0.4);
					bottom: 0;
					left: 0;
					font-size: 24rpx;
					margin: 0 !important;
					border-bottom-left-radius: 12rpx;
					border-bottom-right-radius: 12rpx;
				}

				image,
				.view {
					width: 154rpx;
					height: 154rpx;
					border-radius: 12rpx;
				}
			}
		}

		.delete_img {
			position: absolute;
			right: 10rpx;
			z-index: 10;
			top: 10rpx;
			width: 32rpx;
			height: 32rpx;
			border-radius: 4rpx;
		}

		.Upload_module {
			margin-top: 40rpx;

			.uploadImg {
				width: 150rpx;
				height: 150rpx;
				border: 2rpx solid #dfdfdf;
				border-radius: 12rpx;
				background: #fff;
				display: flex;
				align-items: center;
				justify-content: center;

				.image {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						margin-left: 16rpx;
						margin-top: 20rpx;
						width: 60rpx;
						height: 60rpx;
					}
				}
			}

			.layout {
				display: flex;
				align-items: center;
			}
		}



		.btn_bottom {
			height: 160rpx;
			padding: 12rpx 32rpx;
			margin-top: 100rpx;

			.bnt1 {
				width: 100%;
				color: #fff;
				background: #4d5eff;
				height: 88rpx;
				line-height: 88rpx;
			}

			.bnt2 {
				width: 100%;
				height: 75rpx;
				line-height: 75rpx!important;
				background: #6a8473;
				color: #fff;
				font-weight: 300;
				font-size: 33rpx;
				border-radius: 0;
			}
		}

		.talking {
			padding: 24rpx;
			border-radius: 6rpx;
			margin-top: 10rpx;

			&>view:nth-child(1) {
				&>text:nth-child(1) {
					font-size: 28rpx;
					color: #3D3D3D;
				}

				&>text:nth-child(2) {
					font-size: 24rpx;
					background-color: #e9eafb;
					color: #4d5eff;
					margin-left: 24rpx;
					padding: 4rpx 6rpx;
					border-radius: 12rpx;
				}
			}

			&>view:nth-child(2) {
				background: #fff;
				padding: 24rpx;
				margin-top: 16rpx;

				&>text {
					margin-right: 16rpx;
					color: #000;
				}
			}
		}

	}
	.picker-container {
	  display: flex;
	  flex-direction: column;
	  align-items: flex-start;
	}
	.uni-input {
	  padding: 5px;
	  width: 100%;
	  color: #808080;
	}
	
	.leftTit{
		font-size: 26rpx;
		margin-right: 15rpx;
		width: 190rpx;
		color: #6a8473;
	}
	
	.picker-container{
		font-size: 26rpx;
		margin-top: -9rpx;
		font-size: 26rpx;
	}
	
	.zy{
		font-size: 24rpx;
		color: red;
	}
	
	.switch-container {
	  position: relative;
	  width: 100rpx;
	  height: 46rpx;
	  background-color: #eaeaea;
	  border-radius: 15px;
	  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	}
	 
	.switch-input {
	  opacity: 0;
	  width: 0;
	  height: 0;
	}
	 
	.switch-bar {
	  position: absolute;
	  width: 45rpx;
	  height: 45rpx;
	  background-color: white;
	  border-radius: 50%;
	  transition: background-color 0.3s;
	}
	 
	.active {
	  background-color: #09bb07;
	}
</style>